<template>
  <div class="add-ti">
    <ckeditor id="ck" v-model="quesData.content" :height="'90px'" :placeholder="'请输入题干'"></ckeditor>
    <addUploads :quesFileList="quesData.quesFileList"></addUploads>
    <div v-if="quesType == 4">
      <div class="answer-exercise-list">
        <div
          class="answer-exercise-lis options-box"
          v-for="(item,index) in quesData.answer"
          :key="index"
        >
          <div>
            <span>填空&nbsp;&nbsp;{{index+1}}:</span>
            <!-- <a-button style="margin: 0px 10px;" type="primary" @click="addSortOrder(index)">添加</a-button>
            <a-button style="margin: 0px 10px;" type="danger" @click="setDelete(index)">删除</a-button> -->
            <!-- <a-select v-model="ScoreTypeList[index]" style="width: 120px" @change="handleChange(index)">
              <a-select-option :value="0">全字匹配</a-select-option>
              <a-select-option :value="1">模糊匹配</a-select-option>
            </a-select> -->
            <a-checkbox style="margin-left: 20px;" :checked="CaseSensitiveList[index] == 0" @change="onChange(index)">严格区分大小写</a-checkbox>
          </div>
          <div v-for="(child,key) in item.Order" :key="key" class="question-order-lis">
            <div class="question-order-xian" v-if="key%2"></div>
            <span style="line-height: 43px;">{{key+1}}、</span>
            <div class="question-order-input">
              <a-textarea v-model="child.Content" :placeholder="'请填写填空'+(index+1)+'内容'" @change="setChildContent(index,key)" auto-size />
            </div>
            <div class="exercise-input-number">
              <a-input-number
                v-model="child.Percent"
                style="width: 80px"
                :min="0"
                :max="100"
                :precision="0"
                :step="10"
                :formatter="value => `${value}%`"
                :parser="value => value.replace('%', '')"
                @blur="setInputNum(index,key)"
              />
              <!-- 不显示的 -->
              <a-checkbox v-show="false" style="margin-left: 10px;" :checked="child.CaseSensitive">严格区分大小写</a-checkbox>
            </div>
            <div class="options-controls">
              <i class="Ti-icon options-icon icon-delete" style="cursor: pointer;" @click="addDanger(index,key)"></i>
              <i class="iconfont plus-circle icon-plus-circle" style="cursor: pointer;" @click="addSortOrder(index,key)"></i>
              
            </div>
            
          </div>
        </div>
      </div>
      <a-button
        style="margin-left: 70px;margin-bottom: 10px;"
        type="primary"
        @click="addExercise"
      >添加填空</a-button>
      <!-- <a-tooltip
        placement="bottom"
        title="
      全字匹配：批阅时要求参考答案和学生填写的答案一模一样。
      模糊匹配：批阅时要求参考答案包含学生答案。
      举例:如果参考答案为“123”，学生填写的答案为“23”，全字匹配时为答案错误，正确的应该为“123”。模糊匹配时为答案正确，因为“123”包含“23”。"
        :get-popup-container="getPopupContainer"
      >
        <a-icon
          type="question-circle"
          style="margin-left: 10px;font-size: 20px;color: #f00;vertical-align: -4px;"
        />
      </a-tooltip> -->
      <a-checkbox style="margin-left: 10px;" :checked="quesData.isOrderMatching" @change="onChanges" >严格按照标准答案顺序</a-checkbox>
    </div>
    <div>
      <span style="line-height: 37px;">答案解析：</span>
      <div style="display: inline-block;width: calc(100% - 100px);vertical-align: top;">
        <ckeditor id="ck" v-model="quesData.analysis" :height="'90px'" :placeholder="'请输入解析'"></ckeditor>
      </div>
    </div>
  </div>
</template>

<script>
import addUploads from '@/components/addTi/addUpload/index.vue';
export default {
  data() {
    return {
      Sort: { SortOrder: [] },
      CaseSensitiveList: [],
      ScoreTypeList: [],
    };
  },
  components: {
    addUploads
  },
  props: {
    quesData: {
      type: Object,
      default: () => {}
    },
    quesType: {
      type: Number,
      default: 0
    }
  },
  mounted() {
    this.ScoreTypeList = [];
    this.CaseSensitiveList = [];
    if (this.quesData.answer) {
      for (let i = 0; i < this.quesData.answer.length; i++) {
        var ScoreType = this.quesData.answer[i].Order[0].ScoreType;
        this.ScoreTypeList.push(ScoreType);
        var CaseSensitive = 0;
        if (this.quesData.answer[i].Order[0].CaseSensitive) {
          CaseSensitive = 0;
          this.CaseSensitiveList.push(CaseSensitive);
        } else {
          CaseSensitive = 1;
          this.CaseSensitiveList.push(CaseSensitive);
        }
      }
    }
  },
  methods: {
    getPopupContainer(trigger) {
      return trigger.parentElement;
    },
    getContent() {
      setTimeout(() => {
      }, 200);
    },
    setDelete(index) {
      this.quesData.answer.splice(index, 1);
      var results = this.quesData.content.match(/<img[^>]+>/g);
      var result = [];
      for (let i = 0; i < results.length; i++) {
        if (results[i].indexOf("question_button/BlankSpace") != -1) {
          result.push(results[i]);
        }
      }
      this.quesData.content = this.quesData.content.split(result[index]).join('');
      // @ts-ignore
      var results2 = this.quesData.content.match(/<img[^>]+>/g);
      var result2 = [];
      for (let i = 0; i < results2.length; i++) {
        if (results2[i].indexOf("question_button/BlankSpace") != -1) {
          result2.push(results2[i]);
        }
      }
      // 重新排序填空题的题干
      if (result2) {
        for (let i = 0; i < result2.length; i++) {
          let key = i + 1;
          var vlaImg = `<img data-index="${key}" src="https://cdn-zjy.icve.com.cn/common/images/question_button/BlankSpace${key}.gif">`;
          this.quesData.content = this.quesData.content.split(result2[i]).join(vlaImg);
        }
      }
    },
    setChildContent(index,key) {
      this.quesData.answer[index].Order[key].Content.replace(/\s/g,"");
    },
    addExercise() {
      var num = this.getStrCount();
      if (num <= 25) {
        var CaseSensitive = 0;
        this.CaseSensitiveList.push(CaseSensitive);
        var ScoreType = 0;
        this.ScoreTypeList.push(ScoreType);
        var cise = { Order: [{ SortOrder: num - 1, Content: '', Percent: 100, ScoreType: 0, CaseSensitive: true }] };
        this.quesData.answer.push(cise);
        var numImg = `<img data-index="${num}" src="https://cdn-zjy.icve.com.cn/common/images/question_button/BlankSpace${num}.gif">`;
        if (this.quesData.content == '') {
          this.quesData.content = this.quesData.content + numImg;
        } else {
          var txtIndex = this.quesData.content.lastIndexOf('</p>');
          if (txtIndex == -1) {
            this.quesData.content = this.quesData.content + numImg;
          } else {
            this.quesData.content =
              this.quesData.content.slice(0, txtIndex) + numImg + this.quesData.content.slice(txtIndex);
          }
        }
      } else {
        this.$message.warning('最多25个填空');
      }
    },
    getStrCount() {
      //scrstr 源字符串 armstr 特殊字符
      var count = 1;
      var scrstr = this.quesData.content;
      var armstr = 'https://cdn-zjy.icve.com.cn/common/images/question_button/BlankSpace';
      while (scrstr.indexOf(armstr) != -1) {
        scrstr = scrstr.replace(armstr, '');
        count++;
      }
      return count;
    },
    addSortOrder(index,key) {
      if (this.quesData.answer[index].Order.length < 6) {
        var lis = { SortOrder: index, Content: '', Percent: 100, ScoreType: 0, CaseSensitive: true };
        this.quesData.answer[index].Order.splice(key+1, 0, lis);
      } else {
        this.$message.warning('最多6个填空答案');
      }
    },
    addDanger(index, key) {
      if (this.quesData.answer[index].Order.length == 1) {
        this.setDelete(index);
      } else {
        this.quesData.answer[index].Order.splice(key, 1);
      }
    },
    onChange(index) {
      if (this.CaseSensitiveList[index] == 0) {
        this.CaseSensitiveList[index] = 1;
        for (let i = 0; i < this.quesData.answer[index].Order.length; i++) {
          this.quesData.answer[index].Order[i].CaseSensitive = false;
        }
      } else {
        this.CaseSensitiveList[index] = 0;
        for (let i = 0; i < this.quesData.answer[index].Order.length; i++) {
          this.quesData.answer[index].Order[i].CaseSensitive = true;
        }
      }
    },
    handleChange(index) {
      for (let i = 0; i < this.quesData.answer[index].Order.length; i++) {
        this.quesData.answer[index].Order[i].ScoreType = this.ScoreTypeList[index];
      }
    },
    onChanges(e) {
      this.quesData.isOrderMatching = e.target.checked;
    },
    setInputNum(index,key) {
      var residual = this.quesData.answer[index].Order[key].Percent%10;
      var multiple = (this.quesData.answer[index].Order[key].Percent-residual)/10;
      if (residual < 5) {
        this.quesData.answer[index].Order[key].Percent = multiple*10
      } else {
        this.quesData.answer[index].Order[key].Percent = (multiple+1)*10
      }
      var limit = false;
      for (let i = 0; i < this.quesData.answer[index].Order.length; i++) {
        if (this.quesData.answer[index].Order[i].Percent == 100) {
          limit = true;
        }
      }
      if (!limit) {
        this.quesData.answer[index].Order[key].Percent = 100;
        this.$message.warning('参考答案需一个分值为100%');
      }
    }
  }
};
</script>

<style>
</style>